<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            position: relative;
        }

        .box {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #000;
            display: inline-block;
        }

        .container {
            position: absolute;
            left: 50%;
            width: 128px;
            height: 100px;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            animation: myfirst 2s infinite linear;
        }

        .stage {
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
            perspective: 800px;
        }

        @keyframes myfirst {
            from {
                transform: rotateY(0deg);
            }

            to {
                transform: rotateY(360deg);
            }
        }

        .box:nth-child(1) {
            transform: rotateY(0deg) translateZ(195.839px);
            background: yellow
        }

        .box:nth-child(2) {
            transform: rotateY(40deg) translateZ(195.839px);
            background: yellowgreen
        }

        .box:nth-child(3) {
            transform: rotateY(80deg) translateZ(195.839px);
            background: sienna
        }

        .box:nth-child(4) {
            transform: rotateY(120deg) translateZ(195.839px);
        }

        .box:nth-child(5) {
            transform: rotateY(160deg) translateZ(195.839px);
        }

        .box:nth-child(6) {
            transform: rotateY(200deg) translateZ(195.839px);
        }

        .box:nth-child(7) {
            transform: rotateY(240deg) translateZ(195.839px);
        }

        .box:nth-child(8) {
            transform: rotateY(280deg) translateZ(195.839px);
        }

        .box:nth-child(9) {
            transform: rotateY(320deg) translateZ(195.839px);
        }

        .box2 {
            position: absolute;
            width: 50%;
            height: 50%;
            background-color: rgba(0,255,255,0.5);
            text-align: center;
            font-size:300px;
            line-height: 400px;
            display: inline-block;
            color: white;
            outline: 1px solid darkmagenta;
        }

        .box3 {
            position: absolute;
            width: 25%;
            height: 25%;
            background-color: rgba(255,0,255,0.5);
            text-align: center;
            font-size:100px;
            line-height: 200px;
            display: inline-block;
            color: white;
            outline: 1px solid deepskyblue;
        }

        .container2 {
            width: 800px;
            height: 800px;
            left: 50%;
            transform-style: preserve-3d;
            transform-origin: 50% 50% -200px;
            /*animation: rotate-frame 30s linear infinite;*/
        }

        .stage2 {
            position: relative;
            top: 400px;
            perspective: 1600px;
        }

        .box2:nth-child(1) {
            left: 200px;
            top: -200px;
            transform: rotateX(90deg);
            transform-origin: bottom;
        }

        .box2:nth-child(2) {
            left: 200px;
            bottom: -200px;
            transform: rotateX(-90deg);
            transform-origin: top;
        }

        .box2:nth-child(3) {
            left: -200px;
            top: 200px;
            transform: rotateY(-90deg);
            transform-origin: right;
        }

        .box2:nth-child(4) {
            left: 600px;
            top: 200px;
            transform: rotateY(90deg);
            transform-origin: left;
        }

        .box2:nth-child(5) {
            left: 200px;
            top: 200px;
            transform: translateZ(-400px) rotateX(180deg) rotateY(180deg);
        }

        .box2:nth-child(6) {
            left: 200px;
            top: 200px;
            transform: translateZ(0);
        }

        .box3:nth-of-type(1) {
            left: 300px;
            top: 100px;
            transform: rotateX(90deg) translateY(-100px);
            transform-origin: bottom;
        }

        .box3:nth-of-type(2) {
            left: 300px;
            bottom: 100px;
            transform: rotateX(-90deg) translateY(100px);
            transform-origin: top;
        }

        .box3:nth-of-type(3) {
            left: 100px;
            top: 300px;
            transform: rotateY(-90deg) translateX(-100px);
            transform-origin: right;
        }

        .box3:nth-of-type(4) {
            left: 500px;
            top: 300px;
            transform: rotateY(90deg) translateX(100px) ;
            transform-origin: left;
        }

        .box3:nth-of-type(5) {
            left: 300px;
            top: 300px;
            transform: translateZ(-300px) rotateX(180deg) rotateY(180deg);
        }

        .box3:nth-of-type(6) {
            left: 300px;
            top: 300px;
            transform: translateZ(-100px);
        }

        @keyframes rotate-frame {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            10% {
                transform: rotateX(0deg) rotateY(180deg);
            }
            20% {
                transform: rotateX(-180deg) rotateY(180deg);
            }
            30% {
                transform: rotateX(-360deg) rotateY(180deg);
            }
            40% {
                transform: rotateX(-360deg) rotateY(360deg);
            }
            50% {
                transform: rotateX(-180deg) rotateY(360deg);
            }
            60% {
                transform: rotateX(90deg) rotateY(180deg);
            }
            70% {
                transform: rotateX(0) rotateY(180deg);
            }
            80% {
                transform: rotateX(90deg) rotateY(90deg);
            }
            90% {
                transform: rotateX(90deg) rotateY(0);
            }
            100% {
                transform: rotateX(0) rotateY(0);
            }
        }

    </style>
</head>
<body>
<div class="stage">
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

<div class="stage2">
    <div class="container2">
        <div class="box2">1</div>
        <div class="box2">2</div>
        <div class="box2">3</div>
        <div class="box2">4</div>
        <div class="box2">5</div>
        <div class="box2">6</div>
        <div class="box3-">
            <div class="box3">7</div>
            <div class="box3">8</div>
            <div class="box3">9</div>
            <div class="box3">10</div>
            <div class="box3">11</div>
            <div class="box3">12</div>
        </div>
    </div>
</div>
</body>
</html>